<template>
  <div id=detail>
    <Row>
      <Col>
      <component is="Navigation"></component>
      </Col>
    </Row>
    <Row>
      <Col span="24" class="banner bg-white">
      <div class="banner-bg">
        <img src="../assets/logo.png" alt="">
        <p v-text="bannerObj.descTitle"></p>
        <div class="desc-text">
          <Icon type="ios-clock-outline"></Icon>
          <span>{{bannerObj.descTime}}</span> |
          <Icon type="ios-pricetag-outline"></Icon>
          <span>{{bannerObj.descTag}}</span> |
          <Icon type="ios-eye-outline"></Icon>
          <span>{{bannerObj.descSee}}</span></div>
      </div>
      </Col>
    </Row>
    <Row class="introduce">
      <Col span="15" class="carousel">
      <component is="Carousel" :height="375" :carousels="carousels"></component>
      </Col>
      <Col span="7" offset="1" class="reward bg-white">
      <component is="RewardCard" :rewardObj="rewardObj" :showErrorMessage="true"></component>
      </Col>
    </Row>
    <Row class="description">
      <Col span="15" class="description-content bg-white">
      <component is="Description"></component>
      </Col>
      <Col span="7" offset="1" class="recommend bg-white">
      <component is="Recommend" :recommends="recommends" :title="'热门应用'"></component>
      </Col>
    </Row>

  </div>
</template>

<script type="text/javascript">
  import Header from '../components/Header.vue'
  import Carousel from '../components/Carousel.vue'
  import Description from '../components/description.vue'
  import Recommend from '../components/Recommend.vue'
  import RewardCard from '../components/RewardCard.vue'

  import banner1 from '../assets/banner001.png'
  import banner2 from '../assets/banner002.png'
  import banner3 from '../assets/bg.png'

  import {mapGetters} from 'vuex'
  export default {
    name: 'detail',
    components: {
      Carousel,
      Navigation: Header,
      Description,
      Recommend,
      RewardCard
    },
    methods: {
      getDetail () {
        this.$store.dispatch('getDetail')
      }
    },
    computed: {
      ...mapGetters(['detail'])
    },
    data () {
      return {
        text: '',
        index: 0,
        carousels: [
          banner1, banner2, banner3
        ],
        bannerObj: {
          descImg: '',
          descTitle: '一套基于 Vue.js 的高质量UI组件库',
          descTime: '2016-12-08 13:12:32',
          descTag: 'ide',
          descSee: '47265'
        },
        rewardObj: {
          downloads: 180645,
          version: '4.0.2',
          type: '系统设计',
          time: '2017-05-19',
          showAlert: false,
          buttons: [
            {
              text: '去淘宝购买',
              link: 'javascript:;'
            },
            {
              text: '去官网',
              link: 'javascript:;'
            }
          ]
        },
        recommends: [
          {
            linkAddr: 'javascript:;',
            imgsrc: 'http://img.xclient.info/attachment/2016/11/8192c982-4245-e1b4-36a7-cfcaac406b33.png',
            title: '一套基于 Vue.js 的高质量UI组件库',
            downloads: '96112'
          },
          {
            linkAddr: 'javascript:;',
            imgsrc: 'http://img.xclient.info/attachment/2015/11/b675d3db-f96e-00e5-845a-e2485566d5b5.png',
            title: '一套基于 Vue.js 的高质量UI组件库',
            downloads: '96112'
          },
          {
            linkAddr: 'javascript:;',
            imgsrc: 'http://img.xclient.info/attachment/2016/11/8192c982-4245-e1b4-36a7-cfcaac406b33.png',
            title: '一套基于 Vue.js 的高质量UI组件库',
            downloads: '96112'
          },
          {
            linkAddr: 'javascript:;',
            imgsrc: 'http://img.xclient.info/attachment/2015/11/b675d3db-f96e-00e5-845a-e2485566d5b5.png',
            title: '一套基于 Vue.js 的高质量UI组件库',
            downloads: '96112'
          },
          {
            linkAddr: 'javascript:;',
            imgsrc: 'http://img.xclient.info/attachment/2016/11/8192c982-4245-e1b4-36a7-cfcaac406b33.png',
            title: '一套基于 Vue.js 的高质量UI组件库',
            downloads: '96112'
          }
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" lang="stylus" scoped>
  backGroundColor = #363f48
  backGroundColor-blue = #5cadff
  buttonRewardShadowColor = #f16543;

  #detail {
    background: #f6f6f6;
  }

  #detail .banner {
    height: 450px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    color: #fff;
    .banner-bg {
      background: url('../assets/dev.jpg') no-repeat;
      height: 450px;
      background-attachment: fixed;
      background-position: top center;
      background-size: cover;
      overflow: hidden;
      opacity .9;
    }
    img {
      display: block;
      margin: 60px auto;
      width: 120px;
      height: 120px;
    }
    p {
      text-align center;
      font-size: 24px;
      font-weight 400;
      line-height: 30px;
      margin-top: 20px;
    }
    .desc-text {
      margin-top: 20px;
      font-size 14px;
    }
  }

  .introduce, .description {
    margin: 30px auto;
    max-width: 1200px;
    .carousel {
      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
      border-color: #eee;
      img {
        width: 100%;
        height: 375px
      }
    }
  }

  .bg-white {
    background #fff;
  }

</style>
